<template>
  <div class="timestamp-converter">
    <el-row :gutter="20">
      <!-- 时间戳转日期时间 -->
      <el-col :span="24" class="mb-4">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon color="#409EFF">
                <timer />
              </el-icon>
              <span class="ml-2">时间戳转日期时间</span>
            </div>
          </template>

          <el-form>
            <el-form-item>
              <el-input v-model="timestamp" placeholder="输入时间戳" clearable />
            </el-form-item>

            <el-form-item>
              <el-radio-group v-model="timestampUnit">
                <el-radio label="seconds">秒</el-radio>
                <el-radio label="milliseconds">毫秒</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-card v-if="convertedDateTime" class="result-card">
              <div class="mb-3">
                <strong>本地时间：</strong>
                {{ convertedDateTime.local }}
              </div>
              <div class="mb-3">
                <strong>UTC时间：</strong>
                {{ convertedDateTime.utc }}
              </div>
              <div>
                <strong>ISO格式：</strong>
                {{ convertedDateTime.iso }}
              </div>
            </el-card>
            <div v-else class="placeholder-text">转换结果将在这里显示</div>

            <div class="mt-4">
              <el-button type="primary" @click="convertTimestamp">转换</el-button>
              <el-button @click="clearTimestamp">清空</el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>

      <!-- 日期时间转时间戳 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon color="#67C23A">
                <calendar />
              </el-icon>
              <span class="ml-2">日期时间转时间戳</span>
            </div>
          </template>

          <el-form>
            <el-form-item>
              <el-date-picker v-model="date" type="date" placeholder="选择日期" class="w-full" />
            </el-form-item>

            <el-form-item>
              <el-time-picker v-model="time" placeholder="选择时间" class="w-full" />
            </el-form-item>

            <el-card v-if="convertedTimestamp" class="result-card">
              <div class="mb-3">
                <strong>秒级时间戳：</strong>
                {{ convertedTimestamp.seconds }}
              </div>
              <div>
                <strong>毫秒级时间戳：</strong>
                {{ convertedTimestamp.milliseconds }}
              </div>
            </el-card>
            <div v-else class="placeholder-text">转换结果将在这里显示</div>

            <div class="mt-4">
              <el-button type="primary" @click="convertDateTime">转换</el-button>
              <el-button @click="clearDateTime">清空</el-button>
              <el-button type="success" @click="setCurrentDateTime">当前时间</el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Timer, Calendar } from '@element-plus/icons-vue';

const timestamp = ref('');
const timestampUnit = ref('seconds');
const convertedDateTime = ref(null);

const date = ref(null);
const time = ref(null);
const convertedTimestamp = ref(null);

const convertTimestamp = () => {
  if (!timestamp.value) {
    ElMessage.warning('请输入时间戳');
    return;
  }

  try {
    let ts = parseInt(timestamp.value);
    if (timestampUnit.value === 'seconds') {
      ts *= 1000;
    }

    const date = new Date(ts);
    if (isNaN(date.getTime())) {
      throw new Error('无效的时间戳');
    }

    convertedDateTime.value = {
      local: date.toLocaleString(),
      utc: date.toUTCString(),
      iso: date.toISOString()
    };
  } catch (error) {
    ElMessage.error(error.message);
  }
};

const convertDateTime = () => {
  if (!date.value || !time.value) {
    ElMessage.warning('请选择完整的日期和时间');
    return;
  }

  try {
    const dateTime = new Date(date.value);
    const timeArray = time.value.split(':');
    dateTime.setHours(timeArray[0], timeArray[1]);
    const timestamp = dateTime.getTime();

    convertedTimestamp.value = {
      seconds: Math.floor(timestamp / 1000),
      milliseconds: timestamp
    };
  } catch (error) {
    ElMessage.error('日期时间转换失败');
  }
};

const clearTimestamp = () => {
  timestamp.value = '';
  convertedDateTime.value = null;
};

const clearDateTime = () => {
  date.value = null;
  time.value = null;
  convertedTimestamp.value = null;
};

const setCurrentDateTime = () => {
  const now = new Date();
  date.value = now;
  time.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
  convertDateTime();
};
</script>

<style scoped>
.timestamp-converter {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

.w-full {
  width: 100%;
}

.result-card {
  margin: 16px 0;
  background-color: var(--el-fill-color-light);
}

.placeholder-text {
  text-align: center;
  color: var(--el-text-color-secondary);
  padding: 20px;
  background-color: var(--el-fill-color-light);
  border-radius: 4px;
}
</style>
